<!--
 * @Description: Index
 * @Author: zy
 * @Date: 2021-03-26 19:44:06
 * @LastEditors: zy
 * @LastEditTime: 2021-04-21 20:39:12
-->
<template>
  <el-row id="Venue">
    <el-row style="height: 60%">
      <el-col :span="4" style="height: 100%; border: 1px solid">
        <div id="crowd"></div>
      </el-col>
      <el-col :span="12" style="height: 100%; border: 1px solid">
        <div id="canvas"></div>
      </el-col>
      <el-col :span="8" style="height: 100%; border: 1px solid">
        <div id="UserSankey"></div>
      </el-col>
    </el-row>
    <el-row style="height: calc(40% - 1px)">
      <el-col :span="16" style="height: 100%; border: 1px solid">
        <div id="peopleNumber"></div>
      </el-col>
      <el-col :span="8" style="height: 100%; border: 1px solid"></el-col>
    </el-row>
  </el-row>
</template>
<script>
import { VenueCanvas } from '@/assets/js/Venue_Canvas.js'
import * as HotMap from '@/assets/js/VenueHotMap.js'
import * as Track from '@/assets/js/UserTrack.js'
import * as Sankey from '@/assets/js/Sankey.js'
import {PeopleNumber} from '@/assets/js/peopleNumber.js'
import { Crowd } from '@/assets/js/crowd.js'
// const PeopleNumber = require('@/assets/js/peopleNumber.js').PeopleNumber
export default {
  data () {
    return {
      heigth: '',
      width: '',
      chart: {},
      form: {
        name: '',
        start: '',
        end: ''
      }
    }
  },
  mounted () {
    this.chart['venue'] = new VenueCanvas('canvas')
    this.chart.venue.initChart()
    this.initVenue()
    this.areaPeopleNum()
    this.chart['peoplenumber'] = new PeopleNumber('peopleNumber')
    this.areaCrowd()
    // this.chart.peoplenumber.draw()
    // this.userRealTrack()
    // this.userAreaTrack()
    // this.hotmapByPeriod()
    // let minTime = 25240
    // this.time = 25240
    // let maxTime = 64858
    // setInterval(this.peoplePosition, 2000, this.time)
    // this.peoplePosition()
    this.userSankey()
  },
  created () {
    this.time = 25240
  },
  computed: {
    timeC: {
      get: function () {
        let val = this.time
        let hour = Math.floor(val / 3600)
        val = val % 3600
        let minute = Math.floor(val / 60)
        val = val % 60
        let second = val
        return hour + ':' + minute + ':' + second
      },
      set: function (d) {
        let times = d.split(':')
        console.log(times)
        this.time = parseInt(times[0]) * 3600 + parseInt(times[1]) * 60 + parseInt(times[2])
      }
    }
  },
  methods: {
    /**
     * 绘制会场地图，包括基本地形，区域，传感器位置
     */
    async initVenue () {
      /**
       * 场地的长和宽
       */
      const {data: res} = await this.$http.get('/venues/getVenue', {params: {
        'userName': 'zy',
        'venueName': 'vis',
        'floor': 1
      }})
      /**
       * 传感器的位置
       */
      const {data: sensor} = await this.$http.get('sensorPosition/allsensor', {params: {
        'floor': 1
      }})
      this.chart.venue.renderChart(res.width, res.height, sensor)
      /**
       * 所有的区域
       */
      const {data: areas} = await this.$http.get('/venueArea/allarea', {params: {
        'floor': 1
      }})
      // console.log(areas)
      this.chart.venue.setAllArea(areas)
    },
    /**
     * 根据选定的时间绘制场地热力图
     */
    async hotmapByPeriod () {
      const {data: res} = await this.$http.get('/sensorlog/period', {params: {
        'startTime': 36000,
        'endTime': 36120,
        'day': 1
      }})
      let ids = Object.keys(res)
      let sids = []
      for (let i = 0; i < ids.length; ++i) {
        sids.push([ids[i], res[ids[i]]])
      }
      // console.log(sids)
      HotMap.renderHotMap(sids)
    },
    /**
     * 用户某一天的真实轨迹
     */
    async userRealTrack () {
      const {data: res} = await this.$http.get('/sensorlog/userTrack', {params: {
        'user_id': 10001,
        'day': 1
      }})
      // console.log(res)
      Track.renderRealTrack(10001, res)
    },
    /**
     * 用户某一天的区域轨迹
     */
    async userAreaTrack () {
      const {data: res} = await this.$http.get('/areaTrack/track', {params: {
        'user_id': 10001,
        'day': 1
      }})
      // console.log(res)
      Track.renderAreaTrack(10001, res)
    },
    async userSankey () {
      var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'
      const {data: res} = await this.$http.get(ROOT_PATH + '/data/asset/data/product.json')
      // console.log(res)
      Sankey.render('UserSankey', res)
    },
    async areaPeopleNum () {
      const {data: res} = await this.$http.get('/area_people/getNumByDayAndArea', {params: {
        'day': 1,
        'areaId': 1
      }})
      console.log(res)
      this.chart.peoplenumber.draw(res)
    },
    areaCrowd () {
      this.chart['crowd'] = new Crowd('crowd')
      let area = ['分会场A', '分会场B', '分会场C', '分会场D', '签到处', '海报区', '厕所1', 'room1',
        'room2', '展厅', '主会场', '服务台', 'room3', 'room4', '厕所2', '扶梯1', '扶梯2']
      let data = []
      for (let i = 0; i < 17; ++i) {
        data.push({
          'area': area[i],
          'num': Math.random() * 20 + 5,
          'density': Math.random() + Math.random() * 5
        })
      }
      this.chart.crowd.render(data)
    },
    initCanvas () {
      let height = parseInt(this.heigth)
      let width = parseInt(this.width)
      this.chart.venue.initAxis(width, height)
    },
    /**
     * 场地划分
     */
    regionalization () {
      this.chart.venue.brush(this.form)
    },
    /**
     * 确定场地位置之后增加场地名称
     */
    onSubmit () {
      // let name = this.form.name
      // let selection = [this.form.start.split(',').map(d => parseInt(d)),
      //   this.form.end.split(',').map(d => parseInt(d))]
      // this.chart.venue.setAreaName(name, selection)
      this.userAreaTrack()
    },
    saveArea () {}
    // updateMessage: function () {
    //   this.message = 'updated'
    //   console.log(this)
    //   this.$nextTick(function () {
    //     this.chart.peopleNumber.getXaxisRange()
    //     console.log(this.$el.textContent) // => 'updated'
    //   })
    // }
  }
}
</script>
<style scoped>
#Venue {
  margin-top: 51px;
  height: calc(100%);
}
#canvas, #crowd {
  height: 100%;
  width: 100%;
}
#UserSankey {
  height: 100%;
  width: 100%;
}
#peopleNumber {
  height: 100%;
  width: 100%;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
